﻿

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>介绍 - vue.js</title>
		<script src="../vue/dist/vue.js"></script>
<style type="text/css">
<!--

-->
</style>
    </head>
    <body>

渲染函数 & JSX — Vue.js<br />
https://cn.vuejs.org/v2/guide/render-function.html<br />

<div id="example-4">
  <h1>My title</h1>
  Some text content
</div>

    </body>

<script type="text/javascript">
<!--

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join('')
}

Vue.component('anchored-heading', {
  render: function (createElement) {
    // 创建 kebabCase 风格的ID
    var headingId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^\-|\-$)/g, '')

    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

new Vue({
  el: '#example-4',
  data: {
    show: false
  }
})
</script>

</html>
